<template>
  <div class="course-schedule-container">
    <div style="margin-bottom: 15px" v-if="counter.isLocalhost">
      <el-button type="primary" @click="regenerate"
        >重新生成课程安排表</el-button
      >
    </div>
    <el-table :data="tableData" border v-loading="loading">
      <el-table-column prop="date" label="日期" width="180">
        <template #default="scope">
          <el-select v-model="scope.row.courseDate" placeholder="请选择日期">
            <el-option
              v-for="item in initData"
              :key="item.date"
              :label="item.date"
              :value="item.date"
            >
              {{ item.date }} （{{ item.classStartTime }} ~
              {{ item.classEndTime }}）
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="课次" width="100">
        <template #header>
          <div class="flex alignCenter">
            <div style="margin-right: 10px">课次</div>
            <el-icon v-if="isQuantityMatching" color="#81CD5C" size="20">
              <CircleCheckFilled />
            </el-icon>
            <el-icon v-else color="#F56C6C" size="20">
              <WarningFilled />
            </el-icon>
          </div>
        </template>
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="时段" width="150">
        <template #default="scope">
          <div v-if="scope.row.timeRange">{{ scope.row.timeRange }}</div>
          <div v-else>
            {{ scope.row.classStartTime }} ~ {{ scope.row.classEndTime }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="课时" width="80">
        <template #default>{{ props.info.classSession }}</template>
      </el-table-column>
      <el-table-column prop="curriculum" label="课程" />
      <el-table-column
        prop="lecturerName"
        label="任课老师"
        width="100"
        align="center"
      />
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import useCounterStore from "@/store/counter";
const counter = useCounterStore();
const instance = getCurrentInstance();
const { proxy } = getCurrentInstance();
let props = defineProps(["info", "archiveBinding", "type"]);
let tableData = ref([]); // 表格数据
let initData = ref([]); // 初始化数据
let isQuantityMatching = ref(true); // 数量是否匹配
let templateUrl = ""; // 导出模板地址
let classId = ref(""); //班级编号
let loading = ref(false); // 导出loading

async function getClassData() {
  let resp = await proxy.$apis.classData({
    type: "details",
    data: { _id: props.info._id },
  });
  console.log("班级详情", resp);
  classId.value = resp.classId;
}

//重新生成课程安排表
async function regenerate() {
  await proxy.$apis.classReport({
    type: "B1-list-init",
    data: { classId: props.info._id },
  });
  proxy.$utils.showToast("重置成功");
  getInfo();
}

async function getInfo() {
  try {
    loading.value = true;
    let ret = await proxy.$apis.teachingScheduleData({
      type: "query",
      data: { classId: props.info._id },
    });
    initData.value = [];
    ret.forEach((element) => {
      if (element.isSubmit) initData.value.push(element);
    });
    getClassData();

    let resp = await counter.courseRankingTable(props.info._id);
    console.log("课程排课表", resp);
    tableData.value = resp.tableData;
    isQuantityMatching.value = resp.isQuantityMatching;
  } catch (error) {
    console.log("获取班级信息失败", error);
  } finally {
    loading.value = false;
  }
}

async function getTemplateUrl() {
  templateUrl = await proxy.$apis.fileTemplate({
    data: { type: props.type },
    type: "downLoad",
  });
}

function downLoadTemplate() {
  window.location.href = templateUrl;
}

async function exportWord() {
  if (!templateUrl) return proxy.$utils.showToast("请先设置模板");
  let url = await proxy.$apis.classDocExport({
    templateURL: templateUrl,
    data: {
      tableData: await counter.courseCreateExportParams(tableData.value),
      classId: classId.value ? classId.value : "",
    },
    fileName: "课程安排表.docx",
  });
  window.location.href = url;
}

function createExportParams(e) {
  let array = proxy.$utils.deepcopy(e);
  let data = [];
  array.forEach((element, index) => {
    data.push({
      date: element.courseDate,
      classIndex: index + 1,
      timeRange: element.timeRange
        ? element.timeRange
        : element.classStartTime + "~" + element.classEndTime,
      classHours: 2,
      curriculum: element.curriculum,
      lecturerName: element.lecturerName,
    });
  });
  return data;
}

watch(
  () => [props.info, props.archiveBinding, props.type],
  (newValue, oldValue) => {
    if (newValue) {
      getInfo();
      getTemplateUrl();
    }
  },
  { deep: true, immediate: true }
);

defineExpose({ exportWord, downLoadTemplate, getTemplateUrl });
</script>

<style lang="scss" scoped></style>
